<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>学生表</title>  
  <script src="vue.js"></script>  
  <style>  
    .error-message {  
      color: red;  
    }  
  </style>  
</head>  
<body>  
  <div id="app">  
    <h3>学生表</h3>  
    <div class="container">  
      <form @submit.prevent="submitForm">  
        <div>  
          <label for="no">学号:</label>  
          <input type="text" id="no" v-model="form.no" placeholder="请输入学号..">  
          <span v-if="formErrors.no" class="error-message">{{ formErrors.no }}</span>  
        </div>  
        <!-- 完整代码需要包含其他字段的校验 -->  
        <button type="submit">提交</button>  
      </form>  
    </div>  
  </div>  
  
  <script>  
    const { ref, onMounted } = Vue;  
  
    const app = Vue.createApp({  
      setup() {  
        const form = ref({  
          no: ''  
          // 其他字段...  
        });  
        const formErrors = ref({  
          no: ''  
          // 其他字段的错误信息...  
        });  
  
        const validateForm = () => {  
          formErrors.value = {  
            no: ''  
            // 初始化其他字段的错误信息...  
          };  
  
          // 校验学号  
          if (form.value.no === '') {  
            formErrors.value.no = '学号不能为空';  
            return false;  
          }  
  
          // 校验其他字段...  
  
          // 如果没有错误，返回true  
          return Object.values(formErrors.value).every(error => error === '');  
        };  
  
        const submitForm = () => {  
          if (validateForm()) {  
            // 如果验证通过，可以执行表单提交逻辑  
            // 例如：使用axios发送POST请求到服务器  
            console.log('Form submitted with data:', form.value);  
          }  
        };  
  
        onMounted(() => {  
          // 这里可以放置组件挂载后需要执行的代码  
        });  
  
        return {  
          form,  
          formErrors,  
          submitForm  
        };  
      }  
    });  
  
    app.mount('#app');  
  </script>  
</body>  
</html>